<template>
  <div class="tools-bar">
    <div class="left-group">
      <a-button type="primary">
        <template #icon>
          <icon-plus />
        </template>
        <template #default>添加</template>
      </a-button>
      <a-button type="text" class="icon-btn">
        <template #icon>
          <icon-download />
        </template>
        <template #default>导入</template>
      </a-button>
      <a-button type="text" class="icon-btn">
        <template #icon>
          <icon-upload />
        </template>
        <template #default>导出</template>
      </a-button>
    </div>

    <div class="right-group">
      <a-input v-model="searchValue" placeholder="筛选" class="search-input" />
      <a-button type="text" class="icon-btn">
        <template #icon>
          <icon-search />
        </template>
      </a-button>
      <a-popover position="br" trigger="click">
        <a-button type="text" class="icon-btn">
          <template #icon>
            <icon-message />
          </template>
        </a-button>
        <template #content>
          <div class="search-condition-container">
            <SearchConditionComponent 
              :fields-config="props.fieldsConfig" 
              v-model:toolsBarSearchForm="toolsBarSearchForm"
            />
          </div>
        </template>
      </a-popover>
      <a-button type="text" class="icon-btn">
        <template #icon>
          <icon-refresh />
        </template>
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, type PropType, watch } from 'vue';
import SearchConditionComponent from './SearchCondition.vue';
import type { SearchFieldConfig } from '@/models/BaseModels';
import type { SearchCondition } from '@/models/SearchModels';


const props = defineProps({
  fieldsConfig: {
    type: Array as PropType<SearchFieldConfig[]>,
    required: true
  },
  toolsBarSearchForm: {
    type: Array as PropType<SearchCondition[]>,
    required: true
  }
})

const emit = defineEmits(['update:toolsBarSearchForm']);

// 监听父组件数据变化，更新本地数据
const toolsBarSearchForm = ref(props.toolsBarSearchForm);
// 监听本地数据变化，向上传递
watch(toolsBarSearchForm, (newValue) => {
  emit('update:toolsBarSearchForm', newValue);
});
// 监听父组件数据变化，更新本地数据
watch(() => props.toolsBarSearchForm, (newValue) => {
  toolsBarSearchForm.value = newValue;
});


const searchValue = ref('');

</script>

<style scoped>
.tools-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.left-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.right-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  color: black !important;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 0px;
  border: none;
  outline: none;
}

.icon-btn:focus,
.icon-btn:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.search-condition-container {
  max-height: 300px; 
  overflow-y: auto; 
  padding: 8px;
}
</style>